<template>
  <view :style="{paddingBottom: safeBottom + 'px'}" class="padding-lr-sm" style="position: relative">
    <TnNavbar customBack fixed bg-color="transparent" :bottom-shadow="false">
      <view class="tn-pl-sm tn-pr-xs tn-flex items-center" style="height: 100%;">
        <view class="text-center text-white text-xl text-bold">属性克制倍数总览</view>
      </view>
    </TnNavbar>
    <view class="bg-contaniner"></view>
    <template>
      <view class="flex align-center margin-top-sm" style="position: relative">
        <view
            @click="changeAtk(0)"
            class="padding-tb-sm padding-lr text-center"
            style="width: 210rpx; color: #96daf3"
            :style="{'background-color': currentAtk === 0 ? '#4c79c2' : '#273a5a'}"
        >
          攻击效果
        </view>
        <view
            @click="changeAtk(1)"
            class="padding-tb-sm padding-lr text-center"
            style="color: #96daf3;width: 210rpx"
            :style="{'background-color': currentAtk === 1 ? '#4c79c2' : '#273a5a'}"
        >
          被攻击效果
        </view>
        <view
            style="
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #2b4573;
            color: #96daf3;
            padding: 5px 5px;
            width: 31%"
            class="flex align-center justify-between"
            @click="showSearch = true"
            v-if="currentRestrain"
        >
          <template >
            <view class="flex align-center">
              <image :src="currentRestrain.icon" style="width: 36rpx; height: 36rpx"></image>
              <text>{{ currentRestrain.cn }}</text>
            </view>
            <TnIcon name="down-triangle" size="30rpx"/>
          </template>
        </view>
      </view>
      <view style="background-color: #162d4a;" class="padding-sm">
        <scroll-view scroll-y style="height: 70vh;position: relative">
          <template v-if="!showLoading">
            <view class="flex align-center flex-wrap">
              <view v-for="(item, index) in atkList" :key="item.id" style="width: 20%;"
                    class="flex justify-center" :class="index + 1 <= atkList.length - atkList.length % 5 ? 'margin-bottom-sm' : ''">
                <view style="width: 80%;border: 1px solid #eee" class="flex justify-center align-center flex-direction ">
                  <view class="padding-tb-xs">
                    <image :src="item.icon" style="width: 60rpx; height: 60rpx"></image>
                  </view>
                  <view
                      class="text-center"
                      :class="item.num > 1 ? 'bg-red' : item.num === 0 ? 'bg-grey' : item.num === 1 ? 'bg-green' : 'bg-blue'"
                      style="width: 100%">
                    {{ item.num }}
                  </view>
                </view>
              </view>
              <view v-if="atkList.length === 0" class="text-white text-lg">
                普通属性不克制任何属性, 也不被任何属性克制
              </view>
            </view>
          </template>
          <loading-page :show="showLoading" @click.stop=""/>
        </scroll-view>
      </view>
      <view class="text-red text-bold margin-top-sm">
        红色是被克制，蓝色是微伤害，灰色是无伤害；数字代表被伤害倍数
      </view>
    </template>
    <view class="cu-modal" :class=" showSearch ? 'show' : ''" @click="showSearch = false">
      <view class="cu-dialog tn-text-left" @click.stop="" style="background-color: #182f4d">
        <view class="tn-p-sm flex justify-center">
          <view
              @click="changeRestrain(true)"
              class="padding-tb-sm padding-lr text-center"
              style="color: #96daf3;width: 100px"
              :style="{'background-color': isSingle ? '#2787d3' : '#364d7a'}"
          >
            单属性
          </view>
          <view
              @click="changeRestrain(false)"
              class="padding-tb-sm padding-lr text-center margin-left-sm"
              style="color: #96daf3;width: 100px"
              :style="{'background-color': !isSingle ? '#2787d3' : '#364d7a'}"
          >
            双属性
          </view>
        </view>
        <scroll-view scroll-y style="height: 65vh;padding-bottom: 15px">
          <view class="flex align-center flex-wrap">
            <view
                @click="chooseRestrain(item)"
                v-for="(item, index) in filterRestrain" :key="item.id" style="width: 20%;"
                class="flex justify-center"
                :class="index + 1 <= filterRestrain.length - filterRestrain.length % 5 ? 'margin-bottom-sm' : ''"
            >
              <view style="width: 80%;" class="flex justify-center align-center flex-direction">
                <view>
                  <image :src="item.icon" style="width: 60rpx; height: 60rpx"></image>
                </view>
                <view
                    class="text-center padding-top-xs text-sm text-white"
                    style="width: 100%">
                  {{ item.cn }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import TnNavbar from "@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
  import {onLoad} from '@dcloudio/uni-app'
  import LoadingPage from "../../components/loadingPage.vue";
  import {ref, getCurrentInstance, computed} from 'vue'
  import {onShareAppMessage} from '@dcloudio/uni-app'

  onShareAppMessage(() => {
    return {
      title: '属性克制倍数总览',
      imageUrl: 'https://seerforwdw.info/seer-image/diduo.jpg',
      path: '/pagesA/restrain/restrain'
    }
  })

  const safeBottom = ref(0)

  const {
    proxy
  } = getCurrentInstance()

  const showLoading = ref(false)
  const showSearch = ref(false)

  const currentAtk = ref(0)

  // 获取属性列表
  const currentRestrain = ref(null)
  const restrainList = ref([])
  const getRestrainList = async (id) => {
    showLoading.value = true
    restrainList.value = await proxy.$api.getRestrainList()
    if(id) {
      currentRestrain.value = restrainList.value.filter(item => item.id === Number(id))[0]
    }else {
      currentRestrain.value = restrainList.value[0]
    }
    showLoading.value = false
  }

  // 切换攻击/被攻击效果
  const changeAtk = (type) => {
    currentAtk.value = type
  }

  // 是否单属性
  const isSingle = ref(true)
  // 切换属性
  const changeRestrain = (single) => {
    isSingle.value = single
  }

  // 攻击/被攻击效果列表
  const atkList = computed(() => {
    let arr = []
    showLoading.value = true
    if(currentRestrain.value) {
      const restrain_detail = JSON.parse(currentRestrain.value.res)
      const be_restrained_detail = JSON.parse(currentRestrain.value.be_res)
      if(currentAtk.value === 0) {
        for (let key in restrain_detail) {
          const data = restrainList.value.filter(item => item.id === Number(key))[0]
          arr.push({
            id: data.id,
            icon: data.icon,
            num: restrain_detail[key]
          })
        }
      }else {
        for (let key in be_restrained_detail) {
          const data = restrainList.value.filter(item => item.id === Number(key))[0]
          arr.push({
            id: data.id,
            icon: data.icon,
            num: be_restrained_detail[key]
          })
        }
      }
      arr = arr.sort((a, b) => b.num - a.num)
    }
    setTimeout(() => {
      showLoading.value = false
    }, 200)
    return arr
  })

  const filterRestrain = computed(() => {
    if (isSingle.value) {
      return restrainList.value.filter(item => item.cn.indexOf(' ') < 0)
    } else {
      return restrainList.value.filter(item => item.cn.indexOf(' ') >= 0)
    }
  })

  // 选择属性
  const chooseRestrain = (item) => {
    currentRestrain.value = item
    currentAtk.value = 0
    showSearch.value= false
  }

  onLoad(async (res) => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    await getRestrainList(res.id)
  })
</script>


<style scoped lang="scss">
  /* 移动背景部分 start*/
  .bg-contaniner {
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    --text-color: hsl(0 95% 60%);
    --bg-color: hsl(0 0% 100%);
    --bg-size: 750rpx;
    height: 100%;
    display: grid;
    place-items: center;
    place-content: center;
    overflow: hidden;
    background-color: #4392F4;
    z-index: -1;
  }

  .bg-contaniner::before {
    --size: 150vmax;

    grid-area: body;
    content: "";
    inline-size: var(--size);
    block-size: var(--size);
    background-image: url("https://resource.tuniaokj.com/images/animate/health.png");
    background-size: var(--bg-size);
    background-repeat: repeat;
    transform: rotate(0deg);
    opacity: 0.15;
    animation: bg 6s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .bg-contaniner::before {
      animation-duration: 0s;
    }
  }

  @keyframes bg {
    to {
      background-position: 0 calc(var(--bg-size) * -1);
    }
  }

  /* 移动背景部分 end*/
</style>
